<template>
  <div class="app-container">
    <div class="container-info">
      <div class="filter-container">
        <el-form :inline="true" :model="searchObject">
          <el-form :inline="true" :model="searchObject">
            <el-form-item :label="$t('userList.realName')">
              <el-input v-model="searchObject.realName" :placeholder="$t('userList.realName')" clearable />
            </el-form-item>
            <el-form-item :label="$t('userList.email')">
              <el-input v-model="searchObject.email" :placeholder="$t('userList.email')" clearable />
            </el-form-item>
            <el-form-item :label="$t('userList.companyId')">
              <el-select v-model="searchObject.companyId" clearable filterable :placeholder="$t('userList.placeSelect')">
                <el-option
                  v-for="item in companyList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('userList.deptId')">
              <el-select v-model="searchObject.deptId" clearable filterable :placeholder="$t('userList.placeSelect')">
                <el-option
                  v-for="item in deptOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('dictList.status')">
              <el-select v-model="searchObject.validState" :placeholder="$t('dictList.status')" clearable>
                <el-option value="-1">{{ $t('dictList.placeSelect') }}</el-option>
                <el-option
                  v-for="(item, index) in statusList"
                  :key="index"
                  :label="$t('dictList.status'+item.value)"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="queryList">{{ $t('userList.query') }}</el-button>
              <!-- <el-button type="primary" @click="insert">{{ $t('userList.add') }}</el-button> -->
            </el-form-item>
          </el-form>
        </el-form></div>

      <div v-loading="listLoading" class="content-container">
        <el-table
          v-loading="listLoading"
          :data="list"
          :element-loading-text="$t('loading.text')"
          :tree-props="{children: 'children'}"
          row-key="userId"
          border
          fit
          highlight-current-row
        >
          <el-table-column align="center" :label="$t('userList.id')" width="95">
            <template slot-scope="scope">
              {{ (searchObject.pageIndex - 1 ) * searchObject.pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('userList.realName')"
            align="center"
            width="110"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.realName }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('userList.userId')" width="110" align="center">
            <template slot-scope="scope">
              {{ scope.row.userId }}
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            width="200"
            :label="$t('userList.email')"
          >
            <template slot-scope="scope">
              {{ scope.row.email }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('userList.positionName')" align="center">
            <template slot-scope="scope">
              {{ scope.row.positionName }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('userList.gender')" align="center">
            <template slot-scope="scope">
              {{ genderMap[scope.row.gender] }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('userList.avatar')" align="center">
            <template slot-scope="scope">
              <el-image
                style="width: 100%; height: 100%"
                :src="scope.row.avatar"
              />
            </template>
          </el-table-column>
          <el-table-column :label="$t('userList.tenantId')" width="110" align="center">
            <template slot-scope="scope">
              {{ scope.row.tenantId }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('userList.companyId')" align="center">
            <template slot-scope="scope">
              {{ companyMap[scope.row.companyId] }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('userList.deptId')" align="center">
            <template slot-scope="scope">
              {{ deptMap[scope.row.deptId] }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('userList.validState')" width="110" align="center">
            <template slot-scope="scope">
              <el-tag :type="scope.row.validState | statusFilter">
                {{ statusMap[scope.row.validState] }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column :label="$t('menuList.operatorName')" width="110" align="center">
            <template slot-scope="scope">
              {{ scope.row.operatorName + '-' + scope.row.operatorId }}
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('menuList.operatorDate')" width="200">
            <template slot-scope="scope">
              <span>{{ scope.row.updateTime || scope.row.createTime }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-row>
                <el-col :span="12">
                  <el-button type="primary" size="mini" icon="el-icon-edit" plain @click="update(scope.row)">{{ $t('action.edit') }}</el-button>
                </el-col>
                <el-col :span="12">
                  <el-button type="danger" size="mini" icon="el-icon-delete" plain @click="deleteUser(scope.row)">{{ $t('action.delete') }}</el-button>
                </el-col>
              </el-row>
            </template>
          </el-table-column> -->
        </el-table>

      </div>
      <div class="page-footer">
        <pagination v-show="total>0" :total="total" :page.sync="searchObject.pageIndex" :limit.sync="searchObject.pageSize" style="float:right;" @pagination="queryList" />
      </div>

      <div>
        <el-dialog
          v-if="showInsertDialog.visible"
          :title="showInsertDialog.title"
          :visible.sync="showInsertDialog.visible"
          :width="showInsertDialog.width"
          center
          :before-close="handleClose"
        >
          <addForm ref="insert" @queryList="queryList" @close="closeInsert" />
        </el-dialog>

        <el-drawer
          v-if="showUpdateDialog.visible"
          :width="showUpdateDialog.width"

          :title="showUpdateDialog.title"
          :visible.sync="showUpdateDialog.visible"
          :direction="showUpdateDialog.direction"
          append-to-body
          :before-close="handleClose"
          custom-class="drawer"
        >
          <div class="custom_drawer__content">
            <updateForm ref="updateForm" :menu-info.sync="showUpdateDialog.data" @queryList="queryList" @close="closeUpdate" />
          </div>
        </el-drawer>

        <el-drawer
          v-if="showDictItemDialog.visible"
          :size="showDictItemDialog.width"

          :title="showDictItemDialog.title"
          :visible.sync="showDictItemDialog.visible"
          :direction="showDictItemDialog.direction"
          append-to-body
          :before-close="handleClose"
          custom-class="drawer"
        >
          <div class="custom_drawer__content">
            <dictItemList ref="dictItem" :menu-info.sync="showDictItemDialog.data" @queryList="queryList" @close="closeUpdate" />
          </div>
        </el-drawer>

      </div>

    </div>
  </div>
</template>

<script>
import store from '@/store'
import { generateTitle } from '@/utils/i18n'
import { getUserList, deleteUser } from '@/api/user'
import { getDeptIdItemList } from '@/api/dict'
import { getCompanyDict } from '@/api/company'

import Pagination from '@/components/Pagination'

import addForm from './add.vue'
import updateForm from './update.vue'

export default {
  name: 'UserList',
  components: { addForm, updateForm, Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: 'info',
        1: 'success'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      searchObject: {
        companyId: '',
        deptId: '',
        email: '',
        status: null,
        tenantId: store.getters.tenantId,
        pageIndex: 1,
        pageSize: 10
      },
      paginationObj: {
        pageSize: 1,
        rowCount: 10
      },
      statusList: [
        {
          label: '正常',
          value: 1
        },
        {
          label: '停用',
          value: 0
        }
      ],
      companyList: [],
      companyMap: {},
      statusMap: { 1: '正常', 0: '停用' },
      genderMap: { 1: '男', 0: '未知', 2: '女' },
      list: [],
      listLoading: true,
      total: 0,
      previewOptions: {
        width: 850
      },
      deptOptions: [],
      deptMap: {},
      showUpdateDialog: {
        // 弹窗组件传递数据
        title: '修改',
        visible: false,
        width: '',
        name: '修改', // 组件名,
        loading: false,
        data: '',
        fullscreen: false,
        closeOnPressEscape: false,
        direction: 'rtl'
      },
      showInsertDialog: {
        title: '新增',
        visible: false,
        width: '',
        name: '', // 组件名,
        loading: false
      },
      showDictItemDialog: {
        title: '字典值列表',
        visible: false,
        width: '83%',
        name: '字典值列表', // 组件名,
        loading: false,
        data: '',
        fullscreen: false,
        closeOnPressEscape: false,
        direction: 'rtl'
      }
    }
  },
  created() {
    this.searchObject = {
      processKey: '',
      formName: '',
      validState: null,
      tenantId: store.getters.tenantId,
      pageIndex: 1,
      pageSize: 10
    }
    this.getCompanyDict()
    this.getDeptList()
    this.queryList()
  },
  mounted() {
  },
  methods: {
    getCompanyDict() {
      const postData = { tenantId: this.tenantId }
      getCompanyDict(postData).then(response => {
        this.companyList = response.data
        for (const key in response.data) {
          this.companyMap[response.data[key].value] = response.data[key].label
        }
      })
    },
    getDeptList() {
      const param = store.getters.tenantId
      getDeptIdItemList(param).then(response => {
        this.deptOptions = response.data
        console.log(response.data)
        for (const key in response.data) {
          this.deptMap[response.data[key].value] = response.data[key].label
        }
      }).catch(_ => {})
    },

    updateDictItem(row) {
      this.showDictItemDialog.data = row
      this.$nextTick(() => {
        this.showDictItemDialog.visible = true
      })
    },
    closeUpdateDictItem() {
      this.$nextTick(() => {
        this.showDictItemDialog.visible = false
      })
    },
    insert() {
      this.$nextTick(() => {
        this.showInsertDialog.visible = true
      })
    },
    closeInsert() {
      this.$nextTick(() => {
        this.showInsertDialog.visible = false
      })
    },
    update(row) {
      this.showUpdateDialog.data = row
      this.$nextTick(() => {
        this.showUpdateDialog.visible = true
      })
    },
    closeUpdate() {
      this.$nextTick(() => {
        this.showUpdateDialog.visible = false
      })
    },
    handleClose(done) {
      this.$confirm(this.$t('action.confirmClose'))
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    generateTitle,
    queryList() {
      this.listLoading = true
      var param = this.searchObject
      getUserList(param).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        this.$nextTick(() => {
          this.listLoading = false
        })
      }).catch(function(error) {
        this.listLoading = false
        console.error(error)
      })
    },
    handleDeptChange(value) {
      console.log(value)
    },
    deleteUser(row) {
      this.$confirm(this.$t('action.confirmDelete'), '提示', {
        confirmButtonText: this.$t('action.confirm'),
        cancelButtonText: this.$t('action.delete'),
        type: 'warning'
      }).then(_ => {
        const postData = {
          menuId: row.menuId,
          menuCode: row.menuCode,
          tenantId: row.tenantId
        }
        const _that = this
        _that.listLoading = true
        deleteUser(postData).then(response => {
          _that.listLoading = false
          this.$message('删除成功')
          this.$nextTick(() => {
            this.listLoading = false
          })
          _that.queryList()
        }).catch(function(error) {
          _that.listLoading = false
          console.error(error)
        })
      })
        .catch(_ => {})
    }

  }
}
</script>

<style  rel="stylesheet/scss" lang="scss">

.line{
  text-align: center;
}
.el-drawer:focus {
    outline: none;
}
.custom_drawer__content{
    margin: 5px 20px;
    align-content: center;
}
.el-drawer__header{
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #72767b;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 32px;
    padding: 20px 20px 0;
    font-weight: 500;
    font-size: 18px;
    text-align: center;
    font-weight: 600;
}
.drawer {
  overflow: scroll;
}
.page-footer{
  width: 100%;
    height: 50px;
}
</style>

